<template>
  <div>
    <div class="zyclass">
      <section>
        <!-- <h3>{{hosName}}</h3> -->
        <!-- <h5>医生端</h5> -->
      </section>
      <br><br>
      <section>
        <h5>请患者扫描二维码</h5>
        <!--
          <p>
            <barcode :value="barcode_value" :options="barcode_option" tag="svg"></barcode>
          </p>
         -->
        <div class="barcode-color-box">
          <div class="QrCodeTicketUrl">
            <img :src="QrCodeTicketUrl">
          </div>
        </div>
      </section>
      <!--
      <br><br>
      <section>
        <button class="buttonSM" @click="doSM">
          扫描患者二维码
        </button>
        <br>
        <h6>扫描患者二维码，立即建立长久联系</h6>
      </section>
      -->
    </div>
  </div>
</template>
<script>
import barcode from '@xkeshi/vue-barcode';


const wx = require('weixin-js-sdk');

export default {
  data() {
    return {
      hosName: `${sessionStorage.getItem('hosName')}`,
      QrCodeTicketUrl: '',
      ts: this.newStore(),
      /*       barcode_value: this.$root.doctorInfo.doctorBarcode,
      barcode_option: {
        displayValue: true,
        background: '#fff',
        valid(valid) {
          console.log(valid);
        },
        width: '1px',
        height: '45px',
        fontSize: '13px',
      }, */
      appId: '',
      timestamp: '',
      nonceStr: '',
      signature: '',
    };
  },
  created() {
    document.title = '医生';
  },
  mounted() {
    if (sessionStorage.getItem('rybToken') == '' || sessionStorage.getItem('rybToken') == null) {
      if (sessionStorage.getItem('APPID') != null && sessionStorage.getItem('APPID') != undefined && sessionStorage.getItem('APPID') != '') {
        if (config.MODE == 'dev') {
          this.getUserInfoByDev();
        } else {
          this.wxLogin();
        }
      } else {
        this.$messagebox('登录提示', '网络错误请刷新重试');
      }
    } else {
      this.QrCodeTicketUrl = sessionStorage.getItem('QrCodeTicketUrl');
    }
    // 每次进入该页面，初始化时完成后，都要重新获取扫码参数
    // this.getWxConfigParam();
  },
  components: {
    barcode,
  },
  methods: {
    // 静默方式请求CODE, 并返回到后台。如果后台通过CODE查询存储此OPENID, 直接返回TOKEN
    getUrlParam(name) { // ---返回的地址列表中获取CODE, name="code"
      const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`);
      const r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    getUserInfoByDev(code) { /* 本地调试登录 */
      this.spost(this.ts, `${config.APIRootDev}/doctor/LocalDevLogin.dev?RYBID=DOCTOR`).then((response) => {
        console.log(JSON.stringify(response));
        if (response.d.RESULT == '514' || response.d.RESULT == '515' || response.d.RESULT == '516') {
          this.$messagebox('登录失败', `${response.d.RESULTTEXT}`);
          return;
        }
        // 跳转到注册页
        if (response.d.RESULT == '513') {
          this.$router.push('/login');
          return;
        }
        sessionStorage.setItem('rybToken', response.d.rybToken);
        sessionStorage.setItem('docname', response.d.userInfo.docname);
        sessionStorage.setItem('yyname', response.d.userInfo.yyname);
        sessionStorage.setItem('ks', response.d.userInfo.ks);
        sessionStorage.setItem('sc', response.d.userInfo.sc);

        // this.$messagebox('JSON',JSON.parse(response.d.userInfo.QrCodeTicketUrl).extReturn.qrurl);

        sessionStorage.setItem('QrCodeTicketUrl', JSON.parse(response.d.userInfo.QrCodeTicketUrl).extReturn.qrurl);
        this.QrCodeTicketUrl = JSON.parse(response.d.userInfo.QrCodeTicketUrl).extReturn.qrurl;
      }).catch((err) => {
        sessionStorage.setItem('error', JSON.stringify(err));
        // window.location.href = `${config.APIRootDev}/medicys/error`;
      });
    },
    wxLogin() {
      const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${sessionStorage.getItem('APPID')}&redirect_uri=${location.href.split('#')[0]}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
      let code = this.getUrlParam('code');
      /*
      if (!code) {
        window.location = url;
        alert(`code: ${code}`);
      } else {
        // alert(code);
        sessionStorage.setItem('code', code);
        this.getUserInfo(code);
      } */

      if (!code) {
        code = sessionStorage.getItem('code');
        if (!code) {
          window.location = url;
        } else {
          sessionStorage.setItem('code', code);
          this.getUserInfo(code);
        }
      } else {
        sessionStorage.setItem('code', code);
        this.getUserInfo(code);
      }
    },
    getUserInfo(code) {
      this.spost(this.ts, `https://${sessionStorage.getItem('hospitalDomainname')}/doctor/WeixinLogin.lg?reqType=login&RYBID=${config.APIAPPID}&code=${code}&DATA=${sessionStorage.getItem('hospitalDomainname')}`).then((response) => {
        // this.$messagebox('登录提示',JSON.stringify(response.d));

        /*
         * 不存在用户的情况：
         * "用户被禁"514
         * "手机验证失败"515
         * "身份证校验失败"515
         * "人脸验证失败"515
         * "待审核"515
         * "未审核通过"515
         * "该用户不存在"513 进行注册
         * "用户冗余"516
         */
        if (response.d.RESULT == '514' || response.d.RESULT == '515' || response.d.RESULT == '516') {
          this.$messagebox('登录失败', `${response.d.RESULTTEXT}`);
          return;
        }
        // 跳转到注册页
        if (response.d.RESULT == '513') {
          this.$router.push('/login');
          return;
        }
        sessionStorage.setItem('rybToken', response.d.rybToken);
        sessionStorage.setItem('docname', response.d.userInfo.docname);
        sessionStorage.setItem('yyname', response.d.userInfo.yyname);
        sessionStorage.setItem('ks', response.d.userInfo.ks);
        sessionStorage.setItem('sc', response.d.userInfo.sc);

        // this.$messagebox('JSON',JSON.parse(response.d.userInfo.QrCodeTicketUrl).extReturn.qrurl);

        sessionStorage.setItem('QrCodeTicketUrl', JSON.parse(response.d.userInfo.QrCodeTicketUrl).extReturn.qrurl);
        this.QrCodeTicketUrl = JSON.parse(response.d.userInfo.QrCodeTicketUrl).extReturn.qrurl;
      }).catch((err) => {
        sessionStorage.setItem('error', JSON.stringify(err));
        window.location.href = `https://${sessionStorage.getItem('hospitalDomainname')}/medicys/error`;
      });
    },
    // 初始化扫描二维码配置信息
    getWxConfigParam() {
      // alert(window.location.href.split('#')[0]);
      // alert(`encodeURIComponent(window.location.href): ${encodeURIComponent(`${window.location.href.split('#')[0]}`)}`);
      const req = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.00.09',
          CLIENTID: 'YLAPP',
          RYBID: '',
          TOKEN: '',
          DATA: {
            url: `${encodeURIComponent(`${window.location.href.split('#')[0]}`)}`,
          },
        },
      });
      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': req,
      }).then((ts) => {
        // alert(JSON.stringify(ts.d));
        // alert(JSON.stringify(ts.d.DATAOBJ.DATA));
        sessionStorage.setItem('appId', ts.d.DATAOBJ.DATA.appId);
        sessionStorage.setItem('timestamp', ts.d.DATAOBJ.DATA.timestamp);
        sessionStorage.setItem('nonceStr', ts.d.DATAOBJ.DATA.nonceStr);
        sessionStorage.setItem('signature', ts.d.DATAOBJ.DATA.signature);
        // alert(`是否成功返回四个参数从本页中获取的 appId:${this.appId}   timestamp:${this.timestamp}   nonceStr:${this.nonceStr}   signature:${this.signature}`);
        // 初始化扫描参数
        this.wxConfig();
      }).catch();
    },
    wxConfig() {
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: sessionStorage.getItem('appId'), // 必填，公众号的唯一标识
        timestamp: sessionStorage.getItem('timestamp'), // 必填，生成签名的时间戳
        nonceStr: sessionStorage.getItem('nonceStr'), // 必填，生成签名的随机串
        signature: sessionStorage.getItem('signature'), // 必填，签名，见附录1
        jsApiList: [
          'checkJsApi',
          'chooseImage', // 从本地的相册、图库选择图片
          'previewImage',
          'uploadImage',
          'downloadImage',
          'getNetworkType', // 网络状态接口
          'openLocation', // 使用微信内置地图查看地理位置接口
          'getLocation', // 获取地理位置接口
          'hideOptionMenu', // 界面操作接口1
          'showOptionMenu', // 界面操作接口2
          'closeWindow', // //界面操作接口3
          'hideMenuItems', // //界面操作接口4
          'showMenuItems', // //界面操作接口5
          'hideAllNonBaseMenuItem', // //界面操作接口6
          'showAllNonBaseMenuItem', // //界面操作接口7
          'scanQRCode', // 微信扫一扫接口
        ], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      });

      // 判断当前客户端版本是否支持指定JS接口
      wx.ready(() => {
        wx.checkJsApi({
          jsApiList: ['scanQRCode'], // 需要检测的JS接口列表，
          success(res) {
          // 以键值对的形式返回，可用的api值true，不可用为false
          // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
          // alert(res.errMsg);
          /*
            if (res.checkResult.scanQRCode) {
              alert('支持扫码接口');
            } else {
              alert('不支持扫码接口');
            }
          */
          },
        });
      });

      wx.error((res) => {
        alert(`出错了：${res.errMsg}`);
      });
    },
    // 扫描二维码
    doSM() {
      wx.scanQRCode({
        needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
        desc: 'scanQRCode desc',
        success(res) {
          // const result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
          // alert(`扫描成功::扫描码=${result}`);
        },
        error() {
          this.getWxConfigParam();
          this.$messagebox('提示', '扫码失败， 请点击重试');
        },
      });
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #fff;
}
h3,
h5,
h6 {
  padding: 0;
  margin: 0;
  list-style: none;
  font-style: normal;
  text-decoration: none;
  border: none;
  color: #333;
  font-weight: normal;
  font-family: "Microsoft Yahei";
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
.zyclass {
  text-align: center;
  width: 100%;
  background-color: #fff;
}
.barcode-color-box {
/*   display: inline-block;
  border-radius: 4px;
  padding: 10px;
  height: auto;
  box-sizing: border-box;
  background-color: #f3f3f3;
  margin: 1rem; */
}
.QrCodeTicketUrl {
  width: 100%;
/*   position:inherit;
  height: 100%;
  padding-top: 100%; */
}
.QrCodeTicketUrl img {
  display: inline-block;
  top: 0;
  left: 0;
  width: 50%;
  /* height: 50%; */
}
.buttonSM {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #7078ec;
  border: 1px solid #dcdfe6;
  border-color: #dcdfe6;
  color: #fff;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  margin-bottom: 1rem;
}
</style>
